import React from 'react'
import {BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import {Layout, Menu} from 'antd';
const { Sider, Content } = Layout;

import MovieList from "./MovieList.jsx";
import MovieDetail from "./MovieDetail.jsx";

export default class Movie extends React.Component{
  constructor(props){
    super(props)
    this.state = {}
  }
  
  render(){
    return <Router><Layout style={{height:'100%'}}>
      <Sider trigger={null} collapsible collapsed={this.state.collapsed} style={{height:'100%'}}>
        <Menu mode="inline" defaultSelectedKeys={[window.location.pathname.split('/')[1]]} style={{height:'100%'}}>
          <Menu.Item key="in_theaters" style={{marginTop: 0}}><Link to="/movie/in_theaters/1">正在热映</Link></Menu.Item>
          <Menu.Item key="coming_soon" style={{marginTop: 0}}><Link to="/movie/coming_soon/1">即将上映</Link></Menu.Item>
          <Menu.Item key="top250" style={{marginTop: 0}}><Link to="/movie/top250/1">Top250</Link></Menu.Item>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Content className="site-layout-background" style={{padding: 14, background: '#fff', height: '100%'}}>
          <Switch>
            <Route exact path="/movie/detail/:id" component={MovieDetail}></Route>
            <Route exact path="/movie/:type/:page" component={MovieList}></Route>
          </Switch>
        </Content>
      </Layout>
    </Layout>
    </Router>
  }
}
